<template>
  <div class="hall">
    <home-page></home-page>
    <div class="hot">
      <div class="topTitle">
        <banner :imgs="banners"></banner>
      </div>
      <loading v-if="showList.length == 0"></loading>
      <music-list
        @play="$emit('play', $event)"
        :songlist="showList"
        :shownum="true"
        v-else
      ></music-list>

      <div ref="bottom" class="loadingmore" @click="loadMore">
        {{ this.page >= 5 ? "到底了..." : "加载更多" }}
      </div>
      <div style="height: 20px"></div>
    </div>
    <i @click="scrollToTop" class="toTop fa fa-chevron-up" aria-hidden="true"></i>
    <!-- <div ></div> -->
  </div>
</template>
<script>
import HomePage from "@/components/HomePage"
import MusicList from "@/components/MusicList";
import Banner from "@/components/Banner";
export default {
  name: "Hall",
  data() {
    return {
      hotList: [],
      page: 1, //记录第几页
      banners: [],
    };
  },
  created() {
    this.axios
      .get("/playlist/detail", { params: { id: 3778678 } })
      .then((result) => {
        let musiclist = result.playlist.tracks.map((v, index) => {
          //为了重用musicList组件，里面数据格式转化，添加一个song属性.
          v.song = {
            privilege: result.privileges[index], //码率
            artists: v.ar, //歌手转化为artists
            album: v.al, //专辑转化为album
          };
          return v;
        });
        this.hotList = musiclist; //.splice(0,20);
      });
    this.axios.get("/banner?type=1").then((result) => {
      this.banners = result.banners;
    });
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      window.addEventListener("scroll", vm.windowScroll);
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("scroll", this.windowScroll);
    next();
  },
  methods: {
    loadMore() {
      if (this.page >= 10) {
        return;
      }
      this.page++;
    },
    windowScroll() {
      if (window.scrollY + window.innerHeight > this.$refs.bottom.offsetTop) {
        this.loadMore();
      }
    },
    scrollToTop(){
      window.scrollTo(0,0);
    }
  },
  computed: {
    showList() {
      if (this.hotList.length > 0) {
        let endPos = this.page * 20;
        return this.hotList.slice(0, endPos);
      }
      return [];
    },
  },
  components: {
    MusicList,
    Banner,
    HomePage
  },
};
</script>
<style lang="less" scoped>
.hall{
  height: 100%;
}
.topTitle {
  height: 39vw;
  background-size: cover;
  position: relative;
  & > div {
    font-size: 12px;
    color: white;
  }
}
.loadingmore {
  text-align: center;
  line-height: 80px;
  color: #888;
}
.toTop{
  // background-color: red;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 120px;
  right: 10px;
  font-size: 25px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  color: white;
  background-color: var(--cy-Color);
}
</style>
